<template>
  <div class="search-input">
      <van-icon name="search" class="search"/>
      <input type="text" placeholder="耳机">
      <van-icon name="cross" class="cross"/>
      <span>搜索</span>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
    .search-input{
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        font-size: 0.16rem;
        margin-bottom: 0.1rem;
        .search{
            position: absolute;
            top: 0.15rem;
            left: 0.55rem;
            font-size: 0.18rem;
        }
        .cross{
            position: absolute;
            top: 0.16rem;
            right: 0.8rem;
            font-size: 0.14rem;
        }
        input{
            width: 2.96rem;
            height: 0.36rem;
            font-size: 0.14rem;
            color: #333;
            padding: 0 0.4rem 0 0.4rem;
            border-radius: 0.2rem;
            text-align: left;
            margin-left: 0.4rem;
            margin-right: 1.1rem;
            background-color: #f5f5f5;
            margin-top: 0.05rem;
            border: 1px solid #f5f5f5;
        }
        span{
            position: absolute;
            top: 0.13rem;
            right: 0.2rem;
            font-size: 0.14rem;
        }
    }
</style>